<template>
    <div>
        <section class="accountNumber">
            <header class="modifyPassword">
                账号设置
            </header>
            <ul class="threeLoginBox" v-if="user.userInfo">
                <li>
                    <div>
                        <img v-if="user.userInfo.data.wechatname" src="../img/activeWe.png" alt="">
                        <img v-else src="../img/thereWe.png" alt="">
                    </div>
                    <p>{{user.userInfo.data.wechatname?user.userInfo.data.wechatname:'微信登录'}}</p>
                        <p @click="bindWe" style="color: #ec5e58;">[{{user.userInfo.data.wechatname?'取消关联':'关联账号'}}]</p>
                    
                </li>
                <li>
                    <div>
                        <img v-if="user.userInfo.data.qqname" src="../img/activeQq.png" alt="">
                        <img v-else src="../img/thereQq.png" alt="">
                    </div>
                    <p>{{user.userInfo.data.qqname?user.userInfo.data.qqname:'QQ登录'}}</p>
                    <p  @click="bindQq" style="color: #ec5e58;">[{{user.userInfo.data.qqname?'取消关联':'关联账号'}}]</p>
                    
                </li>
                <li>
                    <div>
                        <img src="../img/activePw.png" alt="">
                    </div>
                    <p>密码</p>
                    <p @click="editPw">[修改密码]</p>
                </li>
            </ul>
            <div class="content" v-show="pwShow">

                <form action="" @submit.prevent="passwordForm" ref="passwordBox">
                    <span class="closePw" @click="pwShow = false"></span>
                    <header class="editPwTitle">修改密码</header>
                    <ul>
                        <li class="registerList">
                            <!-- <span class="labels">原密码</span> -->
                            <input type="password" class="form-control" placeholder="输入原密码" v-model="formLabelAlign.oldPs" v-validate data-vv-rules="required|min:6|max:18" name="oldPw" required data-vv-as="原密码">
                            <span class="help-block" v-show="errorBags.has('oldPw')">{{errorBags.first('oldPw')}}</span>
                        </li>
                        
                        <li class="registerList">
                            <!-- <span class="labels">新密码</span> -->
                        <input v-model="formLabelAlign.newPs" placeholder="设置密码"
            v-validate data-vv-rules="required|min:6|max:18" data-vv-as="密码"
            type="password" class="form-control" name="password" required>
    <span class="help-block" v-show="errorBags.has('password')">{{errorBags.first('password')}}</span>
                    </li>
                        <li class="registerList">
                            <!-- <span class="labels">确认新密码</span> -->
                        <input id="password-confirm" placeholder="请再次输入密码" v-model="formLabelAlign.confirmPs"
                            v-validate data-vv-rules="required|min:6|confirmed:password" data-vv-as="确认新密码"
                            type="password" class="form-control" name="password_confirmation" required>
                        <span class="help-block" v-show="errorBags.has('password_confirmation')">{{errorBags.first('password_confirmation')}}</span> 
                    </li>
                </ul>
                
                <div class="confirmModify">
                    <el-button type="warning" @click.prevent="passwordForm">确认</el-button>
                </div>
            </form>
            </div>
           
            <!-- <footer>
                提醒：为了您的账号安全，建议定期修改密码。
            </footer> -->
        </section>
        
    </div>
</template>
<script>
import jwtToken from '../../../helpers/jwt'
import { ErrorBag } from 'vee-validate';
import {mapState,mapMutations,mapGetters,mapActions} from 'vuex';
export default {
    name : "accountNumber",
    data () {
        return {
            msg : "账号",
            labelPosition: 'left',
            formLabelAlign: {
                oldPs: '',
                newPs: '',
                confirmPs: ''
            },
            linkOn:'关联账号',
            linkOff:'解除关联',
            pwShow : false,
        }
    },
    methods:{
        successPoints() {//注册成功的提示
        var This = this;
            this.$message({
                message: '解除成功',
                type: 'success',
                customClass : "sucPoint",
                duration : 1000,
                showClose : true,
                onClose(){
                    This.$store.dispatch('setAuthUser');
                    This.$router.push({name: 'userCore', params: {activeName:'msg'}})
                }
            });
        },
        bindWe(){//绑定微信
            if(!this.user.userInfo.data.wechatname){
                window.open(this.user.userInfo.data.app_url+'threelogin/wechat?bind=1','_blank')
            }else{
                axios.get("/threeunbind/wechat")
                .then(response => {
                    if(response.data.status==1){
                        this.successPoints();
                        var locatUrlIndex = window.location.hash.indexOf('?');
                        window.location.hash = window.location.hash.slice(locatUrlIndex,locatUrlIndex)
                    }
                })
            }
        },
        bindQq(){
            if(!this.user.userInfo.data.qqname){
                window.open(this.user.userInfo.data.app_url+'threelogin/qq?bind=1','_blank')
            }else{
                axios.get("/threeunbind/qq")
                .then(response => {
                   if(response.data.status==1){
                        this.successPoints();
                        var locatUrlIndex = window.location.hash.indexOf('?');
                        window.location.hash = window.location.hash.slice(locatUrlIndex,locatUrlIndex)
                    }
                })
            }
        },
        successPoint(msg) {//注册成功的提示
        var This = this;
            this.$message({
                message: '恭喜你，'+msg,
                type: 'success',
                customClass : "sucPoint",
                duration : 1000,
                showClose : true,
                onClose(){
                    This.loginOut();
                }
            });
        },
        errorPoint(msg) {//注册成功的提示
            this.$message({
                message: '对不起，'+msg,
                type: 'error',
                customClass : "sucPoint",
                duration : 1000,
                showClose : true,
            });
        },
        loginOut () {//退出登录状态
            return axios
             .post("/logout")//退出接口
             .then(response => {
                // location. reload()
                jwtToken.removeToken();
                this.$store.dispatch("unsetAuthUser");
                this.$router.push({path: "/"})
            });
             
        },
        editPw(){
            this.pwShow = true;
            // $('.content form').css('left',($(window).width()-$('.content form').width())/2+'px')
            // console.log($(window).width(),$('.content form').width())
        },
        passwordForm(){//修改密码
            this.$validator.validateAll().then(result => {
                if (result) {
                    let formData = {
                        password:this.formLabelAlign.oldPs,
                        repassword:this.formLabelAlign.newPs,
                    };
                    return axios.post('/update',formData).then(response => {
                        if(response.data.status==1){
                           /*  this.formLabelAlign.oldPs = "";
                            this.formLabelAlign.newPs = "";
                            this.formLabelAlign.confirmPs = ""; */
                            this.successPoint("修改成功，请登录")
                        }else if(response.data.status==0){
                            this.errorPoint("请输入正确的原密码")
                        }
                    })
                }
            }) 
        },
    },
    created(){
        var locatUrlIndex = window.location.search.indexOf('?');
        var locatUrl = window.location.search.slice(locatUrlIndex+1).split('&').join("=").split("=");
        if(locatUrl[3]){
            axios.get('/threebind/'+locatUrl[3])
            .then(response=>{
                this.$store.dispatch('setAuthUser');
            })
        }
    },
    computed: {
        ...mapState({//登录的用户信息
            user: state => state.AuthUser
        }),
        
    },
    mounted () {
        // console.log(this.user)
    }
    
}
</script>
<style>

.accountNumber{
    /* height: 730px; */
    background: #fff;
}
.modifyPassword{
    font-size: 16px;
    line-height: 60px;
    font-weight: bold;
    border-bottom: 1px solid #dddddd;
    padding-left: 40px;
}
.content{
    width: 100%;
    height: 100%;
    position:fixed;
    top: 0;
    left: 0;
    background: rgba(0,0,0,.45);
    z-index: 999;
    /* padding-top: 26px;
    margin-left: 40px; */
}
.content form{
    background: #fff;
    position: absolute;
    padding: 14px 34px 0 34px;
    border-radius: 4px;
    top: 30%;
    left: 35%;
}
.content input{
    display: inline-block;
    width: 336px;
    height: 36px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.6;
    color: #b3b3b3;
    background-color: #f4f4f4;
    background-image: none;
    border: 1px solid #ccd0d2;
    border-radius: 4px;
}
.content .registerList{
    margin-bottom: 20px;
}
.content .help-block{
    padding-left: 95px;
}
.content .labels{
    display: inline-block;
    width: 84px;
    font-size: 16px;
    line-height: 40px;
    color: #343434;
}
.el-input.is-active .el-input__inner, .el-input__inner:focus{
    border-color: #ea514b;
}
.confirmModify{
    /* padding-left: 130px; */
}
.accountNumber .confirmModify{
    margin-top: 9px;
    margin-bottom: 35px;
}
.el-button--warning{
    width: 336px;
    height: 42px;
    border: none;
    border-radius: 4px;
    background: #ea514b!important;
}
.accountNumber footer{
    font-size: 12px;
    line-height: 60px;
    color: #9b9b9b;
    padding-left: 112px;
    border-top: 1px solid #dddddd;
    margin-top: 361px;
}
.threeLoginBox{
    padding-top: 48px;
    padding-bottom: 250px;
    display: flex;
    justify-content:space-around;
}
.threeLoginBox img{
    width: 62px;
    height: 62px;
}
.threeLoginBox li{
    text-align: center;
}
.threeLoginBox li p{
    font-size: 16px;
    line-height: 24px;

}
.threeLoginBox li p:nth-of-type(1){
    color: #505050;
}
.threeLoginBox li p:nth-of-type(2){
    color: #ec5e58;
    cursor: pointer;
}
.closePw{
    position: absolute;
    width: 15px;
    height: 15px;
    cursor: pointer;
    color: #333;
    top: 11px;
    right: 12px;
    background: url(../img/closePw.png) no-repeat center;
}
.editPwTitle{
    font-size: 16px;
    line-height: 58px;
    color: #333;
    font-weight: bold;
}
</style>